<template>
  <div>
    <a-modal
      :visible="visible"
      title="POI教程"
      :bodyStyle="{
        padding: '20px 60px',
      }"
      :width="800"
      :footer="null"
      @cancel="cancelClick"
      destroyOnClose
    >
      <div
        style="width: 100%; height: 620px; overflow: auto"
        class="hide-scroller-bar"
      >
        <img :src="imgeUrl" style="width: 100%" />
      </div>
    </a-modal>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
export default {
  name: "NewClip",
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    imgeUrl: {
      type: String,
      default: "",
    },
  },
  setup(props, { emit }) {
    const state = reactive({
      count: 0,
    });

    const cancelClick = () => {
      emit("onCancel");
    };

    return {
      ...toRefs(state),
      cancelClick,
    };
  },
};
</script>

<style lang="less" scoped>
.footer {
  width: 100%;
  text-align: right;
  margin-top: 40px;
}
</style>
